<template>
  <div>
    <div class="bjtk gjls_bjtk">
      <div class="bjtk_list">
        <div class="bj">
          <div class="close" @click="close">
            <a-icon type="close" />
          </div>
          <div class="top_list">
            <div class="list1">
              <p class="tit_h2">{{dwmc}}</p>
            </div>
            <div class="list">
              <!-- <span class="span">余额：{{khye}}</span>
              <span class="span">任务人：{{rwr}}</span> -->
              
              <span class="span">跟进记录：
                <span class="sl_style" v-if="gjls!=0">{{gjls}}</span>
                <span class="sl_style" v-else v-html="0"></span>
                条</span>
            </div>
          </div>
          <div class="gjls_box" v-if="genjlsList.length?true:false">
            <div class="gjlist" style v-for="(gjls,i) in genjlsList" :key="i">
              <div class="left">
                <p class="gj_jlr">
                  <span style="color:#ccc">记录人：</span> 
                <span>{{gjls.lxr}}</span>
              </p>
              <p class="gj_rq">
                <span style="color:#ccc">时间：</span> {{gjls.lxrq}}
              </p>
              <p class="jldd_tit">
                <span style="color:#ccc">地点：</span> {{gjls.lxnr2}}</p>
              <div class="xqlist">
                  <p><span style="color:#ccc">跟进：</span>  {{gjls.lxnr1}}</p>
              </div>
              </div>
              <div class="right">
                <p class="p_img " v-for="(img_src,s) in gjls.str" :key="s">
                  <img :src="'https://yb.bearing.cn/'+img_src"  alt />
                </p>
              </div>
            </div>
          </div>
          <div class="zw_tit" v-if="genjlsList.length?false:true">暂无跟进历史</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      // 跳转携带参数信息
      xsdinfo: "",
      // 销售单号
      xsdh: "",
      // 单位名称
      dwmc: "",
      // 公司编码
      gsbm: "",
      // 授权id
      sqdwid: "",
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      // 客户余额
      khye: "",
      // 任务人
      rwr: "",
      // 跟进记录条数
      gjls: "",
      //跟进历史数组
      genjlsList: [],
      // 当前行信息
      genjinInfo: [],
      img_url: ""
    };
  },

  methods: {
    //关闭弹出框
    close() {
      this.$store.state.wzfl = false;
    },
    // 获取跟进信息
    getgjlslist() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newVisitList.php",
          qs.stringify({
            gsbm: this.gsbm,
            dwmc: this.dwmc,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if(res.data.code == 103){
            this.genjlsList = res.data.result.resDate;
              for (var i = 0; i < this.genjlsList.length; i++) {
                console.log(this.genjlsList[i].lxnr3);
                let str = this.genjlsList[i].lxnr3;
                str = str.slice(str.length - 1) === "," ? str.slice(0, -1) : str;
                let str1 = [];
                str1 = str.split(",");
                this.genjlsList[i].str = str1;
              }
              console.log(this.genjlsList);

              if (this.genjlsList) {
                this.gjls = this.genjlsList.length ;
              } else {
                this.gjls = "暂无";
              }
          }
          
        });
    }
  },
  created() {
    this.gsbm = sessionStorage.getItem("gsbm");
    this.genjinInfo = JSON.parse(sessionStorage.getItem("genjinInfo"));
    console.log(this.genjinInfo);
    this.dwmc = this.genjinInfo.DWMC;
    this.getgjlslist();
    this.khye = this.genjinInfo.KHYE;
    this.rwr = this.genjinInfo.RWR;
  }
};
</script>

<style lang='less' >
.bjtk{
  position: fixed;
  top: 0;
  
}
.gjls_bjtk {
  // position: absolute;
  // z-index: 9999;
  // width: 55%;
  // // max-height: 700px;
  // height: 550px;
  // background-color: #fff;
  // text-align: center;
  // padding: 20px;
  // // top: 5%;
  // left: 50%;
  // transform: translateX(-50%);

  .bjtk_list {
    position: relative;
    top: 12px;
    .head {
      display: flex;
      justify-content: space-between;
    }

    .bj {
      .ts {
        margin: 5px 0 0 75px;
        color: red;
        font-size: 12px;
        i {
          margin: 0 5px;
        }
      }
      .close{
        top: -62px;
        right: -20px;
      }
      .top_list {
        // box-shadow: 0 0 5px #ccc;
        padding: 10px 40px;
        border-radius: 10px;
        margin-top: 40px;
        height: 70px;
        display: flex;
        justify-content: space-between;
        .tit_h2 {
          font-size: 14px;
        }
      }
      .list {
        margin: 10px 0;
        display: flex;
        // justify-content: space-around;
        text-align: left;
        .span {
          margin-right: 20px;
        }
        .cz_btn {
          display: block;
          width: 25%;
        }
        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }
      .zw_tit {
        text-align: center;
        padding: 70px 0;
        color: #666;
      }
      .gjls_box {
        text-align: left;
        // padding: 10px 20px;
        // margin-bottom: 10px;
        // -webkit-box-shadow: 0 0 5px #ccc;
        // box-shadow: 0 0 5px #ccc;
        // margin: 10px 20px;
        overflow-y: scroll;
        max-height: 400px;
        .gjlist {
          display: flex;
          flex-wrap: wrap;
          text-align: left;
          padding: 10px 20px;
          margin-bottom: 10px;
          // box-shadow: 0 0 5px #ccc;
          border-top: 1px solid #ccc;
          // border-radius: 5px;
          margin: 10px 20px;
          .left{
            width: 60%;
          p{
            height: 25px;
          }
          .gj_jlr{
            width: 100%;
          }
          .gj_rq{
            width: 100%;
          }
          .list{
            width: 100%!important;
          }
          }
          .right{
            padding-top: 20px;
            width: 40%;
          }
         
          // border-radius: 10px;
          .p_img {
            // display: inline-block;
            // height: 80px;
                max-height: 100%;
            // margin: 0 10px;
            img {
              // width: 100%;
            width: 100px;

              // height: 100%;
            }
          }
          .p_img:hover img {
            width: 100%;

          }
          .jldd_tit {
            // margin-top: 20px;
            width: 100%;
          }
        }
      }
      .bcloading {
        position: relative;
        left: 42%;
        bottom: 214px;
      }
      .list_btn {
        text-align: center;

        button{
          width: 200px;
          height: 40px;
        }
        
      }
    }
  }
}
</style>
